<template>
  <div class="wrap">
    <div class="bar1" ref="crosswise"></div>
  </div>
</template>
<script>
import mixinData from "../utils/mixin.js"

export default {
    //mixin混入
  mixins:[mixinData],
  methods: {
    async getData() {
      //获取业务数据
      let res = await this.$http.get("plantingAreaTop");
      this.data = res.data;
      this.getEcharts();
    },
    getEcharts() {
      //创建echarts实例
      this.echarts = this.$echarts.init(this.$refs.crosswise, this.themeName);
      let category = this.data.map((item) => item.name);
      let value = this.data.map((item) => item.area);
      // console.log(category,value);
      //设置配置项
      let option = {
        title: {
          text: "▍各地区种植面积统计top10",
        },
        xAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
        },
        yAxis: {
          type: "category",
          data: category,
        },
        grid: {
          top: "12%",
          left: "3%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        // 提示语
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            z: 0,
            lineStyle: {
              type: "solid",
            },
          },
        },
        series: [
          {
            type: "bar",
            data: value,
            label: {
              show: true,
              position: "right",
            },
            itemStyle: {
              borderRadius: [0, 20, 20, 0],
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "orangered" },
                { offset: 1, color: "orange" },
              ]),
            },
          },
        ],
      };
      this.echarts.setOption(option);
      this.resize();
    },
    resize() {
      // 获取一个比例尺
      let width = this.$refs.crosswise.offsetWidth;
      // 3.5-3.7
      let scale = (width / 100) * 3.6;
      // 根据比例尺动态设置标题
      let updateOption = {
        title: {
          textStyle: {
            fontSize: scale,
          },
        },
      };
      this.echarts.setOption(updateOption);
      this.echarts.resize();
    },
  },
  mounted() {
    this.getData();
    //一进来就监听窗口变化
    window.addEventListener("resize", this.resize);
  },
  destroyed() {
    window.removeEventListener("resize", this.resize);
  },
};
</script>
<style scoped>
</style>